<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>ChatGPT小助手</title>
<style>
	body {
		font-family: "Helvetica Neue", sans-serif;
		font-size: 16px;
		color: #333;
	}
	
	h1 {
		margin-top: 20px;
		margin-bottom: 20px;
		font-size: 24px;
		font-weight: bold;
		text-align: center;
	}
	
	form {
		margin-bottom: 20px;
		padding: 20px;
		background-color: #f5f5f5;
		border-radius: 10px;
	}
	
	form label {
		display: block;
		margin-bottom: 10px;
		font-weight: bold;
	}
	
	form input[type="submit"] {
		display: block;
		margin-top: 20px;
		padding: 10px 20px;
		background-color: #2196F3;
		color: #fff;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
	
	form textarea {
		display: block;
		margin-bottom: 20px;
		padding: 10px;
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 5px;
		resize: none;
	}
	
	#text-result {
		padding: 10px;
		background-color: #dbd8d8;
		border-radius: 10px;
		margin-bottom: 20px;
	}
	
	#img-result-div {
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}
	
	#img-result {
		max-width: 100%;
		max-height: 500px;
		margin-right: 20px;
		border-radius: 10px;
	}
	
	#img-result-error {
		display: none;
		max-width: 100%;
		max-height: 500px;
		margin-right: 20px;
		border-radius: 10px;
	}
	
	.aa {
		position: fixed;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		font-size: 14px;
		color: #999;
	}
</style>
</head>
<body class="stripe">
	<h1 style="color:red;">注意：仅用于AI技术研究学习，请遵守法律法规，勿用于非法用途！</h1>
	<h1 style="color:red;">openAI官方接口返回较慢，请耐心等待结果</h1>
	<form id="text-form">
		<label for="comments">【智能问答】*请输入智能问答关键词：</label>
		<textarea id="comments" name="comments"></textarea>
		<input type="submit" value="提交">
	</form>
	<div id="text-result"></div>
	
	<form id="img-form">
		<label for="img-comments">【图片生成】*请输入智能图片生成关键词：</label>
		<textarea id="img-comments" name="comments"></textarea>
		<input type="submit" value="提交">
	</form>
	<div id="img-result-div">
		<img id="img-result" src=""/>
		<img id="img-result-error" src=""/>
	</div>
	
	<div class="aa">备案信息：<a href="http://beian.miit.gov.cn">京ICP备18024992号-1</a></div>
	<script>
    // 获取元素
    const textForm = document.getElementById('text-form');
    const textResult = document.getElementById('text-result');
    const textComments = document.getElementById('text-comments');
    const imgForm = document.getElementById('img-form');
    const imgResult = document.getElementById('img-result');
    const imgResultError = document.getElementById('img-result-error');
    const imgComments = document.getElementById('img-comments');

    // 处理函数
    const handleTextSubmit = (event) => {
      event.preventDefault(); // 阻止表单默认提交行为
      fetch('http://localhost:5000/showTextV1', {
        method: 'POST',
        body: new FormData(textForm),
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          textResult.innerHTML = data;
        })
        .catch(error => {
          textResult.innerHTML = `出错了：${error}`;
        });
    };

    const handleImgSubmit = (event) => {
      event.preventDefault(); // 阻止表单默认提交行为
      fetch('http://localhost:5000/showImageV1', {
        method: 'POST',
        body: new FormData(imgForm),
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          imgResult.src = data;
        })
        .catch(error => {
          imgResultError.innerHTML = `出错了：${error}`;
        });
    };

    // 绑定事件
    textForm.addEventListener('submit', handleTextSubmit);
    imgForm.addEventListener('submit', handleImgSubmit);
  </script>
</body>
</html>
